<template>
  <div class="amount">
    <div class="amount-all">
      <n-flex vertical>
        <span class="amount-all__title">单卡金额</span>
        <span class="amount-all__number">7,312.62</span>
      </n-flex>
      <div class="amount-all__limit">
        <n-flex
          justify="space-between"
          style="color: #989898"
        >
          <span>本月剩余额度</span>
          <span>￥23.02</span>
        </n-flex>
        <n-progress
          type="line"
          :show-indicator="false"
          status="success"
          :percentage="20"
        />
      </div>
      <div class="amount-all__btn">
        <AmountButton
          v-for="(item, index) in menuList"
          v-bind="item"
          :key="index"
        />
      </div>
    </div>
  </div>
  <n-grid
    item-responsive
    responsive="screen"
    :x-gap="12"
    :y-gap="12"
    cols="1 s:1 m:1 l:2 xl:2 2xl:2"
  >
    <n-grid-item>
      <AmountToday
        :type="1"
        :price="2021.32"
        :today="21.0"
        :yesterday="11.0"
      />
    </n-grid-item>
    <n-grid-item>
      <AmountToday
        :type="2"
        :price="2021.32"
        :today="21.0"
        :yesterday="11.0"
      />
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
  import { AmountMenu } from '@/types/bill'
  import AmountButton from './components/AmountButton.vue'
  import AmountToday from './components/AmountToday.vue'
  const menuList = <AmountMenu[]>[
    { title: '添加卡包', icon: 'add', background: '#e0edff', color: '#387BEC' },
    { title: '预算管理', icon: 'statis', background: '#ffefdb', color: '#F5A54D' },
    { title: '更多', icon: 'app', background: '#F0F3F6', color: '#61748B' }
  ]
</script>

<style scoped lang="scss">
  .amount {
    &-all {
      @extend .box;
      height: 200px;
      margin-bottom: $space-default;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      &__title {
        color: $minor-color;
      }
      &__number {
        font-size: 24px;
        font-weight: bold;
      }
      &__limit {
        bottom: 0;
      }
      &__btn {
        position: absolute;
        right: 32px;
        top: 32px;
        display: flex;
        width: 300px;
        justify-content: space-between;
      }
    }
    &-indicator {
      @extend .box;
      height: 134px;
    }
  }
</style>
